<template>
  <div class="quick-entry">
    <div class="location">
      <img :src="locationIcon" alt="" style="width:20px;height:20px;margin-right:6px;">
      我所在的位置：{{ doorNum }}
    </div>
    <div class="icon-list">
      <div class="icon-btn" @click="navigateToSearch('教务处')">
        <div class="icon-bg" style="background:#5e94fa"><img :src="officeIcon" style="width:24px;height:24px;"></div>
        <div class="label">教务处</div>
      </div>
      <div class="icon-btn" @click="navigateToSearch('会议室')">
        <div class="icon-bg" style="background:#06d5a3"><img :src="meetingIcon" style="width:24px;height:24px;"></div>
        <div class="label">会议室</div>
      </div>
      <div class="icon-btn" @click="navigateToSearch('财务处')">
        <div class="icon-bg" style="background:#5793fc"><img :src="materialIcon" style="width:24px;height:24px;"></div>
        <div class="label">财务处</div>
      </div>
      <div class="icon-btn" @click="navigateToSearch('厕所')">
        <div class="icon-bg" style="background:#fdb225"><img :src="toiletIcon" style="width:24px;height:24px;"></div>
        <div class="label">厕所</div>
      </div>
      <div class="icon-btn" @click="navigateToFeedback">
        <div class="icon-bg" style="background:#06d5a3"><img :src="exitIcon" style="width:24px;height:24px;"></div>
        <div class="label">问题反馈</div>
      </div>
    </div>
  </div>
</template>
<script>
import officeIcon from '/img/office.png'
import meetingIcon from '/img/meeting.png'
import toiletIcon from '/img/toilet.png'
import exitIcon from '/img/exit.png'
import materialIcon from '/img/material.png'
import locationIcon from '/img/location.png'
import { useRouter } from 'vue-router'

export default {
  name: "QuickEntry",
  props: {
    doorNum: {
      type: String,
      default: '123'
    }
  },
  setup() {
    const router = useRouter()

    const navigateToSearch = (keyword) => {
      router.push({
        path: '/searchList',
        query: { keyword }
      })
    }
    // 新增问题反馈跳转方法
    const navigateToFeedback = () => {
      window.open('https://v.wjx.cn/vm/PG4QTq4.aspx', '_blank')
    }

    return {
      navigateToSearch,
      navigateToFeedback,
      officeIcon,
      meetingIcon,
      toiletIcon,
      exitIcon,
      materialIcon,
      locationIcon
    }
  }
}
</script>

<style scoped>
.quick-entry {
  width: 90vw;
  max-width: 500px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 auto;
}
.quick-entry .location {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #666;
  font-size: 16px;
}
.quick-entry .icon-list {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 0px;
}
.quick-entry .icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
}
.quick-entry .icon-btn .icon-bg {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  font-size: 24px;
  color: #fff;
}
.quick-entry .icon-btn .label {
  font-size: 14px;
  color: #333;
}
</style>
